.face-ul {
  box-sizing: border-box;
  display: flex;
  align-items: center;

  li {
    position: relative;
    display: flex;
    align-items: center;
    padding-right: 12px;

    .card-wrap {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 58px;
      height: 26px;
      border-radius: 4px;
      margin-right: 5px;
      overflow: hidden;

      .card-bg {
        box-sizing: border-box;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: .4;

        &::before {
          content: 'JD';
          position: absolute;
          top: 0;
          left: 2%;
          font-size: 17px;
          font-family: Georgia;
          color: #C0C4CC;
          transform: rotate(-45deg);
        }
      }

      .face-card {
        position: relative;
        font-size: 14px;
        color: #303133;
        font-weight: 500;
        z-index: 2;
      }
    }

    .surplus-num {
      color: #606266;
    }
  }
}